<template>
  <a-row class="goods-list" :gutter="[16, 24]">
    <a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(good, index) in goods" :key="index">
      <a-card hoverable class="goods-card" :bodyStyle="{ padding: '12px' }">
        <template #cover>
          <div class="goods-image-container">
            <a-image :src="good.image" :alt="`product: ${good.title}`" preview class="goods-image" />
            <a class="product-image-link" :href="getProductUrl(good)" :title="good.title"></a>
          </div>
        </template>
        <a-card-meta>
          <template #title>
            <a :href="getProductUrl(good)" class="product-title" :title="good.title">{{ good.title || 'Product Name' }}</a>
          </template>
          <template #description>
            <div class="goods-price-and-actions">
              <a :href="getProductUrl(good)" class="product-link" :title="good.title">
                <a-typography-text type="danger" class="goods-price">{{ currencyUnit }} {{ convertPrice(good.price || 0) }}</a-typography-text>
              </a>
              <a-button type="text" class="collect-button" @click.stop="collectFn(good)">
                <template #icon><StarOutlined style="font-size: 18px; color: #ccc" /></template>
              </a-button>
            </div>
          </template>
        </a-card-meta>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { StarOutlined } from '@ant-design/icons-vue';
import { useCurrencyStore } from '../../../src/store';
import type { Good } from '../../../src/types/good';

const useCurrency = useCurrencyStore();
const currencyUnit = computed(() => useCurrency.currentCurrency.unit);

const convertPrice = (price: number): number => {
  if (!price || isNaN(price)) return 0;
  return parseFloat((price * (useCurrency.currentCurrency.exchange_rate || 1)).toFixed(2));
};

defineProps<{
  goods: Good[]
}>();

const emit = defineEmits<{
  (e: 'collect', good: Good): void
}>();

const collectFn = (good: Good) => {
  emit('collect', good);
};

const getProductUrl = (good: Good): string => {
  if (!good) return '/product/not-found.html';
  const title = (good.title || 'product').toLowerCase().replace(/\s+/g, '-');
  const id = good.id || '0';
  return `/product/${title}-${id}.html`;
};
</script>

<style scoped>
.goods-list {
  margin: 20px 0;
}

.goods-card {
  width: 100%;
  transition: transform 0.3s ease;
}

.goods-card:hover {
  transform: translateY(-5px);
}

.goods-image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 133.33%; /* 3:4 宽高比 */
  overflow: hidden;
  background-color: #f5f5f5;
}

.goods-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

:deep(.ant-image) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

:deep(.ant-image-img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.product-image-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  cursor: pointer;
}

.product-image-link:hover + .ant-image .ant-image-mask {
  opacity: 1;
  z-index: 2;
}

:deep(.ant-card) {
  overflow: hidden;
}

:deep(.ant-card-cover) {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.goods-price-and-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  position: relative;
}

.goods-price {
  font-size: 18px;
  font-weight: bold;
}

.collect-button {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.collect-button:hover {
  opacity: 1;
}

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  height: 40px; /* 控制高度，大约两行文字的高度 */
  line-height: 1.2;
  margin-bottom: 4px;
}

:deep(.ant-card-meta-title) {
  white-space: normal !important;
  text-align: center;
  margin-bottom: 8px !important;
}

:deep(.ant-card-meta-description) {
  text-align: center;
}
</style>